import { createStore, storeKey } from 'vuex';

export default createStore({
  //  state所声明的就是我们需要在项目当中共享的状态（数据）
  state: {
    cart: [],
    ct: 10,
    userInfo: { name: 'dixon', money: 1 },
  },
  getters: {
    // getters 可以看做vuex的计算属性 里面的值是经过一个函数返回的内容
    dbCt(state) {
      // 第一个参数就是 store的state
      return state.ct * 2;
    },
  },
  // mutation 改变 修改（按约定 mutaion是修改vuex状态的唯一方式）
  //  mutations里面声明了 修改状态的方法
  // 这里只能进行同步的state的修改

  mutations: {
    changeUserMoney(state, payload) {
      // 第一个参数就是 store对象的state
      // 第二个参数是 执行的时候的传参
      // state.userInfo = {
      //   ...state.userInfo,
      //   money: state.userInfo.money + payload,
      // };
      // 不要在mutation异步的修改state

      state.userInfo = {
        ...state.userInfo,
        money: state.userInfo.money + payload,
      };
    },
    changeUserName(state, payload) {
      state.userInfo = {
        ...state.userInfo,
        name: payload,
      };
    },
    fn1() {
      console.log('fn1 in the root');
    },
  },
  actions: {
    changeName(ctx, payload) {
      // 第一个参数就是当前的store实例自身
      console.log('ctx', ctx);
      console.log('payload', payload);
      // 一般我们会在actions当中去处理一些异步操作
      setTimeout(() => {
        // 在异步操作结束有结果之后 再调用commit来使用mutation来修改状态
        ctx.commit('changeUserName', 'kkkk');
      }, 2000);
    },
  },
  // module模块
  modules: {
    waimai: {
      //  命名空间
      // 设置命名空间 可以让我们更精确的指定调用指定模块当中的方法
      namespaced: true, // 实践当中正常值一般都要设置为true
      state: {
        version: 10,
      },
      getters: {},
      mutations: {
        fn1(state) {
          // 模块里面的mutation函数得到的state是模块的state
          console.log('fn1 in the mod waimai');
        },
      },
      actions: {},
    },
    hotel: {
      mutations: {
        fn1() {
          console.log('fn1 in the mod hotel');
        },
      },
    },
  },
});
